// 单独使用span表示addonBefore
import React from 'react';
import { Balloon } from '@teamix/ui';
import './index.scss';

// addonBeforeClassName自定义类名
export default class AddonBeforeInput extends React.PureComponent {
  state = {
    isOverflow: false,
  };

  componentDidMount() {
    if (this.element && this.element.scrollWidth > this.element.offsetWidth) {
      this.setState({
        isOverflow: true,
      });
    }
  }

  render() {
    const { text, show, ...others } = this.props;
    const { isOverflow } = this.state;
    const element = (
      <span
        className={'yx-input yx-disabled yx-medium addon-before-span  one-line-ellipsis'}
        {...others}
        ref={(ref) => {
          this.element = ref;
        }}
      >
        {show || text}
      </span>
    );

    if (!isOverflow && !show) {
      return element;
    }

    return (
      <Balloon.Tooltip
        align="t"
        type="primary"
        triggerType="hover"
        closable={false}
        {...others}
        trigger={element}
      >
        {text}
      </Balloon.Tooltip>
    );
  }
}
